<template>
  <a-card :bordered="false">
    <a-card :bordered="false" size="small">
      <a-breadcrumb>
        <a-breadcrumb-item><router-link to="/orderList">订单管理</router-link></a-breadcrumb-item>
        <a-breadcrumb-item>订单详情</a-breadcrumb-item>
      </a-breadcrumb>
    </a-card>
    <a-card>
      <a-tabs v-model="activeKey">
        <a-tab-pane :key="1" tab="基础信息">
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">订单号:</div>
            <div class="meizong_detail_val">{{detail.id}}</div>
          </div>
          <!-- <div class="meizong_detail_row">
            <div class="meizong_detail_title">商家id:</div>
            <div class="meizong_detail_val">{{detail.merchantId}}</div>
          </div> -->
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">下单人:</div>
            <div class="meizong_detail_val">{{detail.nickname}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">下单人手机:</div>
            <div class="meizong_detail_val">{{detail.mobile}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">订单状态:</div>
            <div class="meizong_detail_val">{{detail.status | orderStatus}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">购买时间:</div>
            <div class="meizong_detail_val">{{detail.createTime}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">订单总金额:</div>
            <div class="meizong_detail_val">￥{{detail.money | money}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">实际支付金额:</div>
            <div class="meizong_detail_val">￥{{detail.payMoney | money}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">已退款金额:</div>
            <div class="meizong_detail_val">￥{{detail.refund | money}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">取消订单原因:</div>
            <div class="meizong_detail_val">{{detail.reason}}</div>
          </div>
          <a-table 
            ref="table" 
            size="middle" 
            bordered 
            rowKey="id" 
            :scroll="{ x: 1300 }"
            :columns="columns" 
            :dataSource="tableData" 
            :pagination="ipagination" 
            :loading="loading" 
            @change="handleTableChange" >
            <!--图片预览块-->
            <span slot="imgPath" slot-scope="text, record">
              <img :src="record.goodsImg" width="50px" height="50px" />
            </span>
          </a-table>  
        </a-tab-pane>
        <a-tab-pane :key="2" tab="入账信息" force-render>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">订单状态:</div>
            <div class="meizong_detail_val">{{detail.status | orderStatus}}</div>
          </div> 
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商家优惠券id:</div>
            <div class="meizong_detail_val">{{detail.orderPayInfo.merCouponId}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">商家优惠券减金额:</div>
            <div class="meizong_detail_val" v-show="detail.orderPayInfo.merCouponMoney">￥{{detail.orderPayInfo.merCouponMoney | money}}</div>
          </div> 
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">系统优惠券id:</div>
            <div class="meizong_detail_val">{{detail.orderPayInfo.sysCouponId}}</div>
          </div>
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">系统优惠券减金额:</div>
            <div class="meizong_detail_val" v-show="detail.orderPayInfo.sysCouponMoney">￥{{detail.orderPayInfo.sysCouponMoney | money}}</div>
          </div> 
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">支付方式:</div>
            <div class="meizong_detail_val">{{detail.orderPayInfo.payWay | payWay}}</div>
          </div> 
          <div class="meizong_detail_row">
            <div class="meizong_detail_title">支付时间:</div>
            <div class="meizong_detail_val">{{detail.orderPayInfo.payTime}}</div>
          </div> 
          <a-table 
            ref="table" 
            size="middle" 
            bordered 
            rowKey="id" 
            :scroll="{ x: 1300 }"
            :columns="columns2" 
            :dataSource="tableData2" 
            :pagination="ipagination" 
            :loading="loading" 
            @change="handleTableChange" >
          </a-table> 
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-card>
</template>

<script>
// import moment from 'moment'
import ApiTree from "@/api/order/orderList";
import { Slime, crud } from "@/mixins/slime";

export default {
  name: "orderDetail",
  mixins: [Slime],
  components: {
  },
  data() {
    return {
      activeKey: 1,
      detail:{
        orderPayInfo:{}
      },
      //table
      tableData: [],
      columns: [
        {
          title: "商品id",
          align: "center",
          dataIndex: "goodsId",
        },
        {
          title: "商品图片",
          align: "center",
          dataIndex: "goodsImg",
          scopedSlots: { customRender: 'imgPath' },
        },
        {
          title: "商家名称",
          align: "center",
          dataIndex: "merchantName",
        },
        {
          title: "商品名称",
          align: "center",
          dataIndex: "goodsName",
        },
        {
          title: "数量",
          align: "center",
          dataIndex: "count",
        },
        {
          title: "商品原价",
          align: "center",
          dataIndex: "price",
          customRender: function(money) {
            return (parseInt(money) / 100).toFixed(2);
          }
        },
        {
          title: "商品单价",
          align: "center",
          dataIndex: "unitPrice",
          customRender: function(money) {
            return (parseInt(money) / 100).toFixed(2);
          }
        },
      ],
      tableData2:[],
      columns2: [
        {
          title: "待分账总金额",
          align: "center",
          dataIndex: "total",
          customRender: function(money) {
            return (parseInt(money) / 100).toFixed(2);
          }
        },
        {
          title: "实际分账金额",
          align: "center",
          dataIndex: "money",
          customRender: function(money) {
            return (parseInt(money) / 100).toFixed(2);
          }
        },
        {
          title: "商家名称",
          align: "center",
          dataIndex: "merchantName",
        },
        {
          title: "收款支付宝账号",
          align: "center",
          dataIndex: "aliAccount",
        },
        {
          title: "收款支付宝账号姓名",
          align: "center",
          dataIndex: "aliName",
        },
        {
          title: "原因",
          align: "center",
          dataIndex: "reason",
          customRender: function(reason) {
            switch (reason) {
              case 1:
                return "转账给商家";
              case 2:
                return "转账给首关商家";
              case 3:
                return "分给平台";
              default:
                return "未知状态";
            }
          }
        },
        {
          title: "时间",
          align: "center",
          dataIndex: "createTime",
        },
      ],
    };
  },
  created() {
    let id = this.$route.query.id
    this.loadData(id);
  },
  methods: {
    // 加载表格数据
    loadData(id) {
      ApiTree.getDetail(id).then((res)=>{
        let data = res.result
        this.detail = data
        this.tableData = data.goods
        this.tableData2 = data.transfers ? data.transfers : []
      })
    },
  },
  filters: {
    //订单状态
    orderStatus: function (status) {
      switch (status) {
        case 0:
          return "待支付";
        case 1:
          return "已取消";
        case -2:
          return "待使用";
        case 2:
          return "已支付";
        case 3:
          return "已发货";
        case 4:
          return "发起退款";
        case 5:
          return "退款失败";
        case 7:
          return "已退款";
        case 8:
          return "待评价";
        case 9:
          return "已完成"; 
        default:
          return "未知状态";
      }
    },
    //支付类型
    payWay: function (status) {
      switch (status) {
        case null:
          return "";
        case 1:
          return "支付宝";
        case 2:
          return "微信";
        default:
          return "未知";
      }
    },
  },
};
</script>
<style scoped>
.refund_box{
  margin-top: 20px;
}
.refund_time{
  color: #cdcdcd;
}
</style>